@import './pre/pre_color.less';

.down-arrow {
  display: inline-block;
  position: relative;
  width: 34px;

  // height: 30px;
  &::after {
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-width: 0 2px 2px 0;
    border-color: @gray-6;
    border-style: solid;
    transform: matrix(0.75, 0.71, -0.71, 0.71, 0, 0);
    transform-origin: center;
    transition: transform .3s;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -5px;
  }

  &.shift-active::after {
    transform-origin: center;
    transform: rotate(-135deg);
    transition: transform .3s;
  }
}

.right-arrow {
  display: inline-block;
  position: relative;
  width: 34px;

  &::after {
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-width: 2px 2px 0 0;
    border-color: @gray-6;
    border-style: solid;
    transform: matrix(0.75, 0.71, -0.71, 0.71, 0, 0);
    transform-origin: center;
    transition: transform .3s;
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -6px;
  }
}